<template>
  <div class="county-chronicle">
    <!-- banner模块 -->
    <Header ref="swiperContainerRef" :townList="townArr" :swiperPics="townInfoData.picList"></Header>

    <!-- 了解宁海 -->
    <div class="about-nh">
      <div class="map-info-module">
        <!-- <img src="@/assets/images/map-nh.png" /> -->
        <div :class="`ads ads${index+1}`" v-for="(item,index) in townResetArr" :key="item.key" @click="toggleDialog(item.id)"></div>
      </div>
      <div class="about-nh-content">
        <div class="about-nh-title">
          <img src="@/assets/images/text-nh.png" />
        </div>
        <div class="about-nh-text scrollbar">
          {{ townInfoData.desc }}
        </div>
      </div>
    </div>

    <!-- 乡贤名士 -->
    <ScholarsModule :data='scholarsData'></ScholarsModule>

    <!-- 文化古迹 -->
    <CulturalHeritage :data="culturalData" ></CulturalHeritage>

    <!-- 美丽乡村 -->
    <ScenicVillage :data="villageData" ></ScenicVillage>

    <!-- 寻根问谱 -->
    <AncestralRecords :data="genealogyData"></AncestralRecords>

    <!-- 宁海文化 -->
    <NinghaiCulture :data="literatureArr"></NinghaiCulture>
    <PageFooter></PageFooter>
  </div>

  <el-dialog v-model="dialogVisible" title="" class="no-header-index"   width="940" :before-close="handleClose">
    <div class="pop-main">
      <div class="pop-pic-box">
        <img :src="townData.pic" class="pop-pic" alt="">
      </div>

      <div class="pop-text">
        <div class="pop-title">{{townData.name}}</div>
        <div class="pop-content scrollbar">
          {{townData.desc}}
        </div>
      </div>

      <div class="community-down">
        <div class="community-name"></div>
        <div class="community-list" v-if="dialogVisible">
          <div class="community-btn" v-for="item in townChildListData" :key="item.id" @click="handleVillageClick(item)">
            <ScrollBtn :title="item.name"></ScrollBtn>
          </div>
        </div>
      </div>

    </div>
  </el-dialog>
</template>
<script setup>
import {ref, onMounted, nextTick} from 'vue'
import PageFooter from '@/components/PageFooter.vue'

import Header from "@/components/Header.vue";
import ScholarsModule from "@/components/ScholarsModule.vue";
import CulturalHeritage from "@/components/CulturalHeritage.vue";
import ScenicVillage from "@/components/ScenicVillage.vue";
import AncestralRecords from "@/components/AncestralRecords.vue";
import NinghaiCulture from "@/components/NinghaiCulture.vue";

import ScrollBtn from "@/components/ScrollBtn.vue";
import { homeModelList, townList, chroniclesTree, townInfo, townChildList } from '@/api/common'
import { getGenealogyList } from '@/api/common_also'
import { literatureListPage } from '@/api/common_other'

import { useRouter  } from 'vue-router'

const router = useRouter()

//地图 乡镇 数据
const townResetArr = ref([
  { id: 722, name: '西店镇'},
  { id: 723, name: '深甽镇'},
  { id: 720, name: '黄坛镇'},
  { id: 718, name: '岔路镇'},
  { id: 726, name: '梅林街道'},
  { id: 719, name: '前童镇'},

  { id: 717, name: '桑洲镇'},
  { id: 1110, name: '强蛟镇'},
  { id: 725, name: '桃源街道'},
  { id: 724, name: '跃龙街道'},
  { id: 727, name: '桥头胡街道'},
  { id: 715, name: '一市镇'},

  { id: 721, name: '大佳何镇'},
  { id: 714, name: '茶院镇'},
  { id: 716, name: '越溪乡'},
  { id: 713, name: '力洋镇'},
  { id: 712, name: '胡陈乡'},
  { id: 711, name: '长街镇'},
])

const dialogVisible = ref(false)

// 各模块数据
const scholarsData = ref([])        // 乡贤名士
const culturalData = ref([])        // 文化古迹
const villageData = ref([])         // 美丽乡村
const genealogyData = ref([])       // 祖先

const townArr = ref([])

// 弹窗数据
const townData = ref({})
const townChildListData = ref([])

//宁海县信息
const townInfoData = ref({})
//文献
const literatureArr = ref([])

const toggleDialog = (id) => {
  // 使用 Promise.all 同时请求 townInfo 和 townChildList
  Promise.all([
    townInfo({ id }),
    townChildList({ orgId: id })
  ]).then(responses => {
    const [infoResponse, childResponse] = responses;
    
    // 处理 townInfo 响应
    let { code: infoCode, data: infoData, message: infoMessage } = infoResponse;
    if (infoCode === 0) {
      townData.value = infoData;
      dialogVisible.value = true;
    } else {
      ElMessage.warning(infoMessage);
      return; // 如果获取乡镇信息失败，则不继续处理
    }
    
    // 处理 townChildList 响应
    let { code: childCode, data: childData, message: childMessage } = childResponse;
    if (childCode === 0) {
      townChildListData.value = childData;
    } else {
      ElMessage.warning(childMessage);
    }
  }).catch(error => {
    console.error('请求出错:', error);
    ElMessage.error('数据加载失败');
  });
}
const handleClose = () => {
  dialogVisible.value = false
}
//查询乡镇、街道列表
const getTownList = () => { 
  townChildList({
    orgId: 1
  }).then(res => { 
    let { code, data, message } = res
    if(code === 0){
      townArr.value = data
    }else{
      ElMessage.warning(message);
    }
  })
}
// 使用 Promise.all 并发请求所有数据
const getAllHomeData = () => {
  const requests = [
    homeModelList({ type: 0, orgId: '' }), // 乡贤名士
    homeModelList({ type: 1, orgId: '' }), // 文化古迹
    homeModelList({ type: 2, orgId: '' }), // 美丽乡村
  ];

  Promise.all(requests)
    .then(responses => {
      responses.forEach((res, index) => {
        let { code, data, message } = res;
        if (code === 0) {
          switch (index) {
            case 0:
              scholarsData.value = data;
              break;
            case 1:
              culturalData.value = data;
              break;
            case 2:
              villageData.value = data;
              break;
          }
        } else {
          ElMessage.warning(message);
        }
      });
    })
    .catch(error => {
      console.error('请求出错:', error);
      ElMessage.error('数据加载失败');
    });
}

//寻根问谱
const getGenealogyListFunction = () => { 
  getGenealogyList({
    pageNum: 1,
    pageSize: 10
  }).then(res=>{
    let { data, msg } = res;
    // debugger
    if(res.code === '200') { 
      genealogyData.value = data.rows
    }else { 
      ElMessage.warning(msg);
    }
  })
};

// 宁海县信息
const getPageInfo = () => { 
  townInfo({id:1}).then(res=>{ 
    let { code, data, message } = res
    if(code === 0){
      townInfoData.value = data
    }else{
      ElMessage.warning(message);
    }
  })
}

// 文献列表
const getLiteratureListPage = ()=>{
  literatureListPage({
    pageNum:1,
    pageSize:8,
    orgId:1
  }).then(res=>{ 
    let { code, data, msg } = res
    if(code == '200'){
      literatureArr.value = data.rows
    }else{
      ElMessage.warning(msg);
    }
    
  })
}

onMounted(() => {
  getAllHomeData();
  getGenealogyListFunction()
  getTownList()

  getPageInfo()

  getLiteratureListPage()
});

// 在现有代码中添加这个方法
const handleVillageClick = (item) => {

  // 跳转到村社区详情页，假设路由为 '/village'，参数为村社区ID
  router.push({ 
    path: '/village', 
    query: { id: item.id } 
  });
};

</script>
<style lang="scss">
.county-chronicle {
  min-width: 1280px;
}

.about-nh {
  height: 700px;
  background: url("../../assets/images/about-nh.png") no-repeat center center;
  display: flex;
  justify-content: center;

  .map-info-module {
    margin-top: 156px;
    width: 745px;
    height: 518px;
    background: url("@/assets/images/map-nh.png") 100% 100%;
    position: relative;
    .ads {
      transition: transform 0.4s ease, box-shadow 0.3s ease;
      cursor: pointer;
      &:hover {
        transform: scale(2);
        z-index: 11;
      }
    }
    .ads1 {
      background: url("@/assets/images/ads/ads1_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 54px;
      left: 278px;
      &:hover {
        background-image: url("@/assets/images/ads/ads1.png");
      }
    }
    .ads2 {
      background: url("@/assets/images/ads/ads2_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 121px;
      left: 228px;
      &:hover {
        background-image: url("@/assets/images/ads/ads2.png");
      }
    }
    .ads3 {
      background: url("@/assets/images/ads/ads3_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 237px;
      left: 184px;
      &:hover {
        background-image: url("@/assets/images/ads/ads3.png");
      }
    }
    .ads4 {
      background: url("@/assets/images/ads/ads4_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 323px;
      left: 155px;
      &:hover {
        background-image: url("@/assets/images/ads/ads4.png");
      }
    }
    .ads5 {
      background: url("@/assets/images/ads/ads5_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 62px;
      position: absolute;
      top: 150px;
      left: 284px;
      &:hover {
        background-image: url("@/assets/images/ads/ads5.png");
      }
    }

    .ads6 {
      background: url("@/assets/images/ads/ads6_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 284px;
      left: 235px;
      &:hover {
        background-image: url("@/assets/images/ads/ads6.png");
      }
    }
    .ads7 {
      background: url("@/assets/images/ads/ads7_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 392px;
      left: 195px;
      &:hover {
        background-image: url("@/assets/images/ads/ads7.png");
      }
    }
    .ads8 {
      background: url("@/assets/images/ads/ads8_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 102px;
      left: 363px;
      &:hover {
        background-image: url("@/assets/images/ads/ads8.png");
      }
    }
    .ads9 {
      background: url("@/assets/images/ads/ads9_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 62px;
      position: absolute;
      top: 167px;
      left: 345px;
      &:hover {
        background-image: url("@/assets/images/ads/ads9.png");
      }
    }
    .ads10 {
      background: url("@/assets/images/ads/ads10_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 62px;
      position: absolute;
      top: 240px;
      left: 298px;
      &:hover {
        background-image: url("@/assets/images/ads/ads10.png");
      }
    }

    .ads11 {
      background: url("@/assets/images/ads/ads11_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 78px;
      position: absolute;
      top: 132px;
      left: 400px;
      &:hover {
        background-image: url("@/assets/images/ads/ads11.png");
      }
    }
    .ads12 {
      background: url("@/assets/images/ads/ads12_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 316px;
      left: 336px;
      &:hover {
        background-image: url("@/assets/images/ads/ads12.png");
      }
    }
    .ads13 {
      background: url("@/assets/images/ads/ads13_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 62px;
      position: absolute;
      top: 115px;
      left: 510px;
      &:hover {
        background-image: url("@/assets/images/ads/ads13.png");
      }
    }
    .ads14 {
      background: url("@/assets/images/ads/ads14_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 173px;
      left: 460px;
      &:hover {
        background-image: url("@/assets/images/ads/ads14.png");
      }
    }
    .ads15 {
      background: url("@/assets/images/ads/ads15_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 279px;
      left: 399px;
      &:hover {
        background-image: url("@/assets/images/ads/ads15.png");
      }
    }

    .ads16 {
      background: url("@/assets/images/ads/ads16_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 209px;
      left: 506px;
      &:hover {
        background-image: url("@/assets/images/ads/ads16.png");
      }
    }
    .ads17 {
      background: url("@/assets/images/ads/ads17_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 220px;
      left: 612px;
      &:hover {
        background-image: url("@/assets/images/ads/ads17.png");
      }
    }
    .ads18 {
      background: url("@/assets/images/ads/ads18_.png");
      background-size: 100% auto;
      z-index: 9;
      width: 18px;
      height: 52px;
      position: absolute;
      top: 297px;
      left: 602px;
      &:hover {
        background-image: url("@/assets/images/ads/ads18.png");
      }
    }
  }
  .about-nh-content {
    margin-left: 80px;
    margin-top: 79px;
    display: flex;
    flex-direction: column;
    align-items: center;
    .about-nh-text {
      margin-top: 60px;
      width: 445px;
      line-height: 34px;
      font-size: 18px;
      color: #393329;
      position: relative;
      height: 238px;
      overflow: auto;
      padding-right: 30px;
    }
  }
}

.pop-main{
  width: 800px;
  margin: 0 auto;
  .pop-pic-box{
    display: flex;
    justify-content: center;
    .pop-pic{
      width: 800px;
      height: 245px;
    }
  }
  .pop-text{
    margin-top: 30px;
    .pop-title{
      font-weight: 500;
      font-size: 30px;
      color: #111111;
    }
    .pop-content{
      padding-right: 20px;
      margin-top: 20px;
      font-weight: 400;
      font-size: 16px;
      color: #393329;
      line-height: 34px;
      height: 200px;
      overflow: auto;
    }
  }
}


.community-down {
  margin-top: 30px;
  padding-bottom: 30px;
  display: block;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  .community-name {
    width: 262px;
    height: 46px;
    background: url("@/assets/images/cz_next_title.png");
  }
  .community-list {
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    margin-top: 35px;
    .community-btn{
      margin-bottom: 16px;
      margin-right: 58px;
      cursor: pointer;
      &:nth-child(4n){
        margin-right:0
      }
    }
    
  }
}
</style>
